<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- <link rel="stylesheet" type="text/css" href="{$_G['URL']['YX2020_CSS']}css/reset.css"> -->

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/jquery.js?v=2"></script>
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/reset.css">
    <link rel="stylesheet" type="text/css" href="https://css2020.yixuan.net/2020css/yx2020/css/swiper.min.css">

    <script src="https://css2020.yixuan.net/2020css/yx2020/js/swiper-3.4.2.min.js"></script>
    <script src="{$_G['URL']['LOTTERY_CSS']}lottery/js/layer/layer.js"></script>
    <script>
        init();
        window.onresize = init;
        function init(){
            document.documentElement.style.fontSize =
                document.documentElement.clientWidth / 7.5 + 'px';
        }
    </script>
    <title>{$theme['title']}</title>
    <style>
        body{
            background: #f7f7f7;
        }
        .wrap{
            padding-bottom: 1.13rem;
        }
        .wrap .content{
            background: #f7f7f7;
            padding: 0.14rem 0.16rem 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .wrap .content .li{
            display: flex;
            justify-content: flex-start;
            padding: 0.19rem 0.11rem 0.17rem;
            background: #ffffff;
            margin-bottom: 0.14rem;
            border-radius: 0.2rem;
            position: relative;
        }
        .wrap .content .li .checkbox,.footer .checkbox{
            padding-left: 0.15rem;
            padding-right: 0.54rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 5;
        }
        .wrap .content .li .checkbox .checkbox_img,.footer .checkbox .checkbox_img{
            width: 0.22rem;
            height: 0.17rem;
            display: none;
        }
        .wrap .content .li .input,.footer .checkbox .input{
            width: 0.37rem;
            height: 0.37rem;
            border-radius: 0.37rem;
            background: #f7f7f7;
            border: 0.01rem solid #eeeeee;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .content .li input:checked+.input,.footer .checkbox input:checked+.input{
            background-image: linear-gradient(to top,#f8277a,#fe848d);
        }
        .wrap .content .li input:checked+.input .checkbox_img,.footer .checkbox input:checked+.input .checkbox_img{
            display: block;
        }
        .wrap .content .li input,.footer .checkbox input{
            display: none;
        }
        .wrap .content .head_img{
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 0.14rem;
            flex-grow: 7;
        }
        .wrap .content .bonustxt{
            width: 1.32rem;
            height: 0.87rem;
            position: absolute;
            top: 0;
            right: 0.18rem;
        }
        .wrap .content .li .right{
            color: #999999;
            font-size: 0.24rem;
            padding-left: 0.4rem;
            flex-grow: 15;
        }
        .wrap .content .li .right .tit{
            width: 4.8rem;
            color: #333333;
            font-size: 0.28rem;
            line-height: 0.64rem;
        }
        .wrap .b_content .li .right .tit{
            line-height: 0.5rem;
        }

        .wrap .content .li .right .data{
            display: flex;
            justify-content: flex-start;
            padding-top: 0.16rem;
            line-height: 0.42rem;
        }
        .wrap .content .li .right .data .d_left,.wrap .content .li .right .data .d_right{
            display: flex;
            flex-direction: column;
        }
        .wrap .content .li .right .data .d_left{
            padding-right: 0.3rem;
            position: relative;
        }
        .wrap .content .li .right .data .d_right{
            padding-left: 0.3rem;
        }
        .wrap .content .li .right .data .d_right .dr_t{
            font-size: 0.28rem;
            color: #f91d76;
        }
        .wrap .content .li .right .data .d_right .dr_b{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap .content .li .right .data .d_right .dr_b img{
            width: 0.21rem;
            height: 0.21rem;
            margin-right: 0.07rem;
        }
        .wrap .content .li .right .name{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0.1rem;
            margin-top: 0.1rem;
        }
        .wrap .content .li .right .name span{
            color: #5086ff;
            background: #ecf5ff;
            line-height: 0.32rem;
            padding: 0 0.08rem;
            font-size: 0.2rem;
            border-radius: 0.06rem;
        }
        .wrap .content .li .right .d_txt{
            color: #999999;
            font-size: 0.24rem;
            line-height: 0.38rem;
        }
        .wrap .content .li .right .d_txt span{
            font-size: 0.26rem;
            color: #f91d76;
        }

        .footer{
            position: fixed;
            bottom: 0;
            background: #ffffff;
            width: 7.5rem;
            left: 0;
            right: 0;
            box-shadow: 0 -0.1rem 0.2rem 0 rgba(200,200,200,0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 1.13rem;
            z-index: 2;
        }
        .footer .button{
            width: 3.86rem;
            height: 0.86rem;
            background:linear-gradient(to right,#f82079,#fe878e);
            color: #ffffff;
            font-size: 0.28rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.26rem;
            border-radius: 0.2rem;
        }
        .footer .button a{
            color: #ffffff;
        }
        .footer .button img{
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.12rem;
        }
        .footer .checkbox{
            padding: 0;
            padding-left: 0.2rem;
            width: 0.9rem;
            display: flex;
            flex-direction: column;
        }
        .footer .checkbox input{
            display: none;
        }
        .footer .checkbox span{
            font-size: 0.22rem;
            color: #999999;
            padding-top: 0.1rem;
        }
        .footer .data{
            width: 2.5rem;
            padding-left: 0.5rem;
            padding-right: 0.4rem;
        }
        .footer .data .top{
            font-size: 0.28rem;
            color: #333333;
        }
        .footer .data .top span{
            color: #f91d76;
        }
        .footer .data .bot{
            font-size: 0.24rem;
            color: #999999;
            font-style: italic;
        }
        .footer .data .bot span{
            color: #fa6397;
            text-decoration: underline;
            padding: 0 0.1rem;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="content">
        {loop $free $item}
        <label class="li">
            <div class="checkbox">
                <input type="checkbox" data-giftid="{$item['id']}" onchange="giftChoose(this)">
                <div class="input">
                    <img class="checkbox_img" src="{$_G['URL']['BEILAI_IMG']}/ok.png">
                </div>
            </div>
            <img class="head_img" src="{$item['top_img']}" alt="">
            <img src="{$_G['URL']['BEILAI_IMG']}/bonustxt.png" class="bonustxt">
            <div class="right">
                <div class="tit">{$item['name']}</div>
                <div class="data">
                    <div class="d_left d_txt">
                        <div>价值：<span>￥{$item['price']}</span></div>
                    </div>
                </div>
            </div>
        </label>
        {/loop}
    </div>
    <div class="footer">
        <label class="checkbox">
            <input type="checkbox" id="all_check" onclick="allChoose()">
            <div class="input">
                <img class="checkbox_img" src="{$_G['URL']['BEILAI_IMG']}/ok.png">
            </div>
            <span>全选</span>
        </label>
        <div class="data">
            <div class="top">已选<span id="choose_num">0</span>个</div>
            <div class="bot">最多选<span>{$gift_max_num}</span>个{$gift_other_name}</div>
        </div>
<!--        可选总数-->
<!--        最小选择数  $gift_min_num-->
<!--        最大选择数  $gift_max_num-->
        <div class="button">
            <a href="javascript:goNext()"><span>下一步</span></a>
        </div>
    </div>
</div>
</body>
<script>
    let gift_min_num="{$gift_min_num}";
    let gift_max_num="{$gift_max_num}";
    $('.content .li .checkbox input').change(function () {


        let curt_ck_len = $(".content .li .checkbox input:checked").length;
        if (curt_ck_len>gift_max_num){
            $(this).removeProp('checked').removeAttr('checked');
            let msg = '最多选择'+gift_max_num+'个赠品';
            layer.msg(msg);
            return;
        }
        $("#all_check").removeProp('checked').removeAttr('checked');

        if(($(".content .li .checkbox input:checked").length)==($(".content .li .checkbox input").length)){
            $("#all_check").prop("checked",true);
        }
        $("#choose_num").html($(".content .li .checkbox input:checked").length);
    })
    function giftChoose(that){

    }
    function allChoose(){
        let curt_ck_len = $(".content .li .checkbox input").length;
        if (curt_ck_len>gift_max_num){
            $(".footer .checkbox input").removeProp('checked').removeAttr('checked');
            let msg = '最多选择'+gift_max_num+'个赠品';
            layer.msg(msg);
            return;
        }else{
            if($("#all_check").prop("checked")){
                $(".content .li .checkbox input").prop("checked",true);
            }else{
                $(".content .li .checkbox input").removeProp('checked').removeAttr('checked');
            }
            $("#choose_num").html($(".content .li .checkbox input:checked").length);
        }
    }
    function goNext(){
        let length=$(".content .li .checkbox input:checked").length;
        if(length<gift_min_num){
            layer.msg(`最少选择${gift_min_num}个`);
            return;
        }
        if(length>gift_max_num){
            layer.msg(`最多只能选择${gift_max_num}个`);
            return;
        }
        //↓↓↓↓↓↓↓↓赠品id存储数据到storage，表单页提交使用
        let arr=[];
        for(let i=0;i<length;i++){
            arr.push($(".content .li .checkbox input:checked").eq(i).data("giftid"));
        }
        let arrstr=arr.join(",");
        localStorage.setItem("gift_ids",arrstr);
        //↑↑↑↑↑↑↑↑
        //↓↓↓↓↓↓↓↓赠品存储数据到storage，表单页回显
        let htmlArr=[];
        for(let i=0;i<length;i++){
            let giftid = $(".content .li .checkbox input:checked").eq(i).data("giftid");
            let index=$(".content .li .checkbox input").index($(".content .li .checkbox input:checked").eq(i));
            let top_img=$(".content .li .head_img").eq(index).attr("src");
            let name=$(".content .li .tit").eq(index).html();
            let price=$(".content .li .right .d_txt span").html();
            htmlArr.push({
                top_img,name,giftid,price
            });
        }
        let giftStr=JSON.stringify(htmlArr);
        localStorage.setItem("giftStr",giftStr);
        //↑↑↑↑↑↑↑↑






        let nextUrl="/{php echo createMobileUrl('wx', array('themeid'=>$themeid,'from'=>'mobile','r'=>'beilai.index.payconfirm','joinid'=>$joinid,'recordid'=>$recordid));}";
        window.location.href=nextUrl;
    }
    window.onload=function(){
        setTimeout(function(){
            $("#choose_num").html($(".content .li .checkbox input:checked").length);
        })
    }
</script>
</html>